<template>

    <section class="city">
        <h1 class="title">热门城市</h1>
        <City :cityList="cityList"></City>
        <div class="page">
            <el-pagination v-model:current-page="ListDto.pageNum" size="small" background layout="prev, pager, next"
                v-model:page-size="ListDto.pageSize" @current-change="handleCurrentChange" :total="total"
                class="mt-4" />
        </div>
    </section>

</template>


<script setup>
import City from '@/components/City/city.vue';
import { getCityListAPI } from '@/api'
import { reactive, ref } from 'vue';

const ListDto = reactive({
    pageNum: 1,
    pageSize: 6,
})

const handleCurrentChange = (val) => {
    ListDto.pageNum = val
    initCityList()
}

let cityList = ref()
let total = ref(0)
const initCityList = async () => {
    const res = await getCityListAPI(ListDto)
    cityList.value = res.rows
    total.value = Number(res.total)
    console.log("popoio", res)
}
initCityList()

</script>


<style lang="scss" scoped>
.city {
    padding: 3rem 9%;

    .title {
        margin-bottom: 2rem;
        text-align: center;
        margin-top: 8rem;
        font-size: 3.5rem;
        color: #808080;
    }
}

.page {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 2rem;
}
</style>